<template>
	<div style="">
		<Steps :current="0" style="margin: 0 auto;position: relative;top: 50%;margin-top: 50px; width: 1000px; " v-show="step == '1'">
			<Step title="进行中" content="进入百度网盘自动备份设置"></Step>
			<Step title="待进行" content="设置自动备份时间"></Step>
			<Step title="待进行" content="选择自动备份文件"></Step>
			<Step title="待进行" content="完成设置,执行自动备份"></Step>
		</Steps>
		<Steps :current="1" style="margin: 0 auto;position: relative;top: 50%;margin-top: 50px; width: 1000px; " v-show="step == '2'">
			<Step title="已完成" content="进入百度网盘自动备份设置"></Step>
			<Step title="进行中" content="设置自动备份时间"></Step>
			<Step title="待进行" content="选择自动备份文件"></Step>
			<Step title="待进行" content="完成设置,执行自动备份"></Step>
		</Steps>
		<Steps :current="2" style="margin: 0 auto;position: relative;top: 50%;margin-top: 50px; width: 1000px; " v-show="step == '3'">
			<Step title="已完成" content="进入百度网盘自动备份设置"></Step>
			<Step title="已完成" content="设置自动备份时间"></Step>
			<Step title="进行中" content="选择自动备份文件"></Step>
			<Step title="待进行" content="完成设置,执行自动备份"></Step>
		</Steps>
		<Steps :current="3" style="margin: 0 auto;position: relative;top: 50%;margin-top: 50px; width: 1000px; " v-show="step == '4'">
			<Step title="已完成" content="进入百度网盘自动备份设置"></Step>
			<Step title="已完成" content="设置自动备份时间"></Step>
			<Step title="已完成" content="选择自动备份文件"></Step>
			<Step title="进行中" content="完成设置,执行自动备份"></Step>
		</Steps>
		<Card style="width: 800px;margin: 0 auto;position: relative;top: 50%;margin-top: 50px; " v-show="step == '1'">
			<p slot="title">自动备份设置</p>
			<div class="modal">
				<img src="../../assets/upload.png" />
				<Button style="width: 100%;" @click="one">自动备份【进入设置】</Button>
			</div>
		</Card>
		<Card style="width: 800px;margin: 0 auto;position: relative;top: 50%;margin-top: 50px; " v-show="step == '2'">
			<p slot="title">自动备份设置</p>
			<div class="modal">
				<Form :label-width="120">
					<img src="../../assets/upload.png" />
					<FormItem label="备份间隔时间">
						<InputNumber :max="60" :min="1" v-model="value1" style="float: left;"></InputNumber>
						<p>分</p>
					</FormItem>
					<FormItem>
						<Button @click="two">下一步</Button>
					</FormItem>
				</Form>
			</div>
		</Card>
		<Card style="width: 800px;margin: 0 auto;position: relative;top: 50%;margin-top: 50px; " v-show="step == '3'">
			<p slot="title">自动备份设置</p>
			<div class="modal">
				<Form :label-width="120">
					<img src="../../assets/upload.png" />
					
						<Upload multiple type="drag" action="//jsonplaceholder.typicode.com/posts/" :before-upload="UploadFile">
							<div style="padding: 20px 0">
								<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
								<p>Click or drag files here to upload</p>
							</div>
						</Upload>
					
						<div style="text-align: center;">
							<Button @click="upload">保存</Button>
						</div>
					
				</Form>
			</div>
		</Card>
		<Card style="width: 800px;margin: 0 auto;position: relative;top: 50%;margin-top: 50px; " v-show="step == '4'">
			<p slot="title">自动备份设置</p>
			<div class="modal">
				<Form :label-width="120">
					<img src="../../assets/upload.png" />
					<h1 style="text-align: center;">正在备份中……已备份{{this.Times}}次</h1>
					<div style="width: 100%;text-align: center;">
						<Button style="text-align: center;" @click="again">重新备份</Button>
						<Button style="text-align: center;" @click="stop">停止备份</Button>
					</div>
				</Form>
			</div>
		</Card>
	</div>
</template>
<script>
	import axios from 'axios'
	import qs from "qs";
	export default {
		data() {
			return {
				InputPath: '/Upload', //下载路径
				value1: '30',
				value2:'100000',
				uploadFile: null,
				loadingStatus: false,
				step:'1',
				Times:'0',
				timer:null,
			}
		},
		mounted() {
			var number =  window.sessionStorage.getItem('Baidu_upload')
			if(number != null){
				this.step = '4'
				this.Times = number
			}else{
				this.step='1'
				this.Times='0'
			}
		},
		methods: {
			one(){
				this.step = '2'
			},
			two(){
				this.step = '3'
			},
			three(){
				this.step = '4'
			},
			four(){
				this.step = '4'
			},
			again(){
				this.step = '1' 
			},
			stop(){
				clearInterval(this.timer);
				this.timer=null;
				window.sessionStorage.setItem('Baidu_upload','0')
				this.Times = 0;
				this.$Message.success("自动备份已停止，如需继续备份请重新设置。");
			},
			UploadFile(files) {
				var time = this.value1 *60*1000
				console.log(time)
				var i = 0;
				this.timer = setInterval(()=>{
						console.log(files);
						//第一步 预上传
						var _this = this;
						var access_token = window.sessionStorage.getItem("access_token");
						axios({
							url: "https://pan.baidu.com/rest/2.0/xpan/file?method=precreate&access_token=" +
								access_token,
							method: "post",
							data: qs.stringify({
								path: "/" + files.name,
								autoinit: 1,
								target_path: "/",
								block_list: '[""]',
								rtype:3
							})
						}).then(res => {
							console.log(res.data);
							var uploadid = res.data.uploadid;
							//第二步分片上传
					
							// 读取完成时的回调
							let formData = new FormData();
							formData.append("file", files);
							var BDUSS =
								"E5DbGVrYmpyMEN-TXVqdUYzTlBkRE1JOFNaTGhCWGxybWlVWXo2SU5wdVFnVkpmSVFBQUFBJCQAAAAAAQAAAAEAAADxV3gYv-HDqM34xcwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJD0Kl-Q9CpfW";
							axios({
								url: "https://d.pcs.baidu.com/rest/2.0/pcs/superfile2?method=upload&BDUSS=" +
									BDUSS +
									"&app_id=250528&method=upload&type=tmpfile&path=/" +
									files.name +
									"&uploadid=" +
									uploadid +
									"&partseq=0",
								method: "post",
								data: formData
							}).then(res => {
								console.log(res);
					
								// 第三步上传成功
								axios({
									url: "https://pan.baidu.com/rest/2.0/xpan/file?method=create&access_token=" +
										access_token,
									method: "post",
									data: qs.stringify({
										path: "/" + files.name,
										size: files.size,
										uploadid: uploadid,
										target_path: "/",
										block_list: '["' + res.data.md5 + '"]',
										rtype:3
									})
								}).then((res, req) => {
									console.log(res.data);
									console.log(res);
									i++
									_this.Times = i
									window.sessionStorage.setItem('Baidu_upload',i)
								});
							});
						});
					
				},time)
			},
			upload() {
				this.step = '4'
			}
		}
	}
</script>
